import { Component } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzImageModule } from 'ng-zorro-antd/image';

@Component({
  selector: 'app-image-placeholder',
  standalone: true,
  imports: [NzImageModule, NzButtonModule],
  template: `
    <div class="demo">
      <div>
        <img
          nz-image
          [nzSrc]="src"
          nzPlaceholder="/image1-small.png"
          style="width: 200px"
          alt=""
        />
      </div>
      <div>
        <button nz-button (click)="reload()">Save</button>
      </div>
    </div>
  `,
  styles: ``,
})
export class ImagePlaceholderComponent {
  src = '/image1.png';
  reload() {
    this.src = '/image1.png?_r=' + Math.random();
  }
}
